window.onload = function(){
	
	function $(id){
		return document.getElementById(id);
	}

	// 页面切换
	var pagel = $('con').getElementsByClassName('movelogo')[0];
	var pager = $('con').getElementsByClassName('movelogo')[1];
	var lis = $('title').getElementsByClassName('sh');
	var list = $('title').getElementsByTagName('li');
	var allpage = $('inner').getElementsByClassName('cutf');
	var page = document.getElementsByClassName('page');

	var number = 0;
	// 左边点击事件
	pagel.onclick = function(){
		number--;
		maxmin();
		move(number);
	}
	// 右边点击事件
	pager.onclick = function(){
		number++;
		maxmin();
		move(number);
	}
	// 标题点击事件
	for(var i = 0;i<lis.length;i++){
		lis[i].index = i;
		lis[i].onclick = function(){
			number = this.index;
			move(number);
		}
	}
		// number的最大值与最小值
	function maxmin(){
		if(number<0){
			number = 0;
		}
		if(number>page.length-1){
			number = page.length-1;
		}
	}
	// 鼠标滚轮事件
	$('inner').addEventListener('mousewheel',fun,false);
	$('inner').addEventListener('DOMMouseScroll',fun,false);
	function fun(evt){
			var event = evt||window.event;
			var point = true;
			if(event.wheelDelta){
				point = event.wheelDelta>0?false:true;
			}else{
				point = event.detail>0?true:false;
			}
			// 判断鼠标滚轮方向
			if(point){
				number++;
			}else{
				number--;
			}
			maxmin();
			move(number);
		}
		// 通过number来改变页面移动
	move(number);
	function move(n){
		$('inner').style.left = -(n*$('con').offsetWidth)+'px';
		for(var i = 0;i<lis.length;i++){
			lis[i].className = 'sh';
		}
		lis[n].className = 'sh now';
	}


	// 页面增减
	var adds = $('addbg').getElementsByTagName('li');
	var addgroup = $('addbg').getElementsByTagName('i');
	$('add_page').onclick = function(){
		$('addbg').style.display = 'block';
	}
	$('pageclose').onclick = function(){
		$('addbg').style.display = 'none';
	}
	for(var i = 0;i<adds.length;i++){
		adds[i].index = i;
		adds[i].onclick = function(){
			if(addgroup[this.index].className == 's'){
				addgroup[this.index].className = 'h';
				allpage[this.index].className = 'cutf';
				list[this.index].className = '';
			}else if(addgroup[this.index].className == 'h'){
				addgroup[this.index].className = 's';
				allpage[this.index].className = 'cutf page page'+(this.index+1);
				list[this.index].className = 'sh';
			}
		}
	}

	// 首页面搜索框
	// 切换搜索引擎
	$('search-logo').onclick = function(){
		if($('allsearch').className == 'none_search'){
			$('allsearch').className = '';
		}else if($('allsearch').className == ''){
			$('allsearch').className = 'none_search';
		}
	}
	var searchLis = $('search-logo').getElementsByTagName('li');
	var searchImgs = $('allsearch').getElementsByTagName('img');
	searchLis[0].onclick = function(){
		$('engine').src = searchImgs[0].src;
		$('hint').placeholder = '百度一下';
	}
	searchLis[1].onclick = function(){
		$('engine').src = searchImgs[1].src;
		$('hint').placeholder = '搜狗搜索';
	}
	searchLis[2].onclick = function(){
		$('engine').src = searchImgs[2].src;
		$('hint').placeholder = '谷歌';
	}

	// Ajax搜索
	$('hint').oninput = function(){
		Script = document.createElement('script');
				// 百度URL接口
		Script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=fn';
		document.body.appendChild(Script);
	}
	$('hint').onkeydown = function(evt){
		var event = evt || window.event;
		if(this.value.length != 0){
			if(event.keyCode == 13){
				// 打开网页
				window.open('https://www.baidu.com/s?wd='+this.value);
			}
		}
	}
	$('search-btn').onclick=function(){
		if($('hint').value.length != 0){
			// 打开网页
			window.open('https://www.baidu.com/s?wd='+$('hint').value);
		}
	}
	function fn(data){
		document.body.removeChild(Script);
	}

	// 拖拽-----------
	var dragLis = $('drag').getElementsByTagName('li');
	// var dragLis = $('drag').getElementsByClassName('addblock');
	var dragImgs = $('drag').getElementsByTagName('img');
	var dragIs = $('drag').getElementsByTagName('i');
	var dragAs = $('drag').getElementsByTagName('a');
	var dragPs = $('drag').getElementsByTagName('p');
	var dragDivs = $('drag').getElementsByTagName('div');

	var sitesLis = $('sites').getElementsByTagName('li');
	var sitesImgs = $('sites').getElementsByTagName('img');
	var sitesPs = $('sites').getElementsByTagName('p');
	var sitesIs = $('sites').getElementsByTagName('i');

	// 保存页面添加的网址
	var nowAddU = localStorage.addURL;
	if(nowAddU){
		var json = JSON.parse(nowAddU);
		$('drag').innerHTML = json.dragCon;
		$('sites').innerHTML = json.sitesCon;
	}
	
	// 关闭添加网址页面
	$('addsites_close').onclick = function(){
		$('addsites_bg').style.display = 'none';
	}

	for(var i = 0;i<dragLis.length;i++){
		// 打开添加网址页面
		(function(sub){
			dragLis[sub].children[0].onclick=function(){
				$('addsites_bg').style.display = 'block';
				if(dragLis[sub].className == 'addblock'){
					$('addsites_bg').style.display = 'none';
				}
				for(var j=0;j<sitesLis.length;j++){
					sitesLis[j].onclick=function(){
						if(this.children[0].className == 'active'){
							alert('该网址以添加');
						}else{
							this.children[0].className = 'active';
							dragAs[sub].href = this.children[1].getAttribute('as');
							dragImgs[sub].src = this.children[1].src;
							dragPs[sub].innerHTML = this.children[2].innerHTML;
							dragLis[sub].className = 'addblock';
							dragDivs[sub].className = 'drag_inner';
							$('addsites_bg').style.display = 'none';
							localStorage.addURL=JSON.stringify({dragCon:$('drag').innerHTML, sitesCon:$('sites').innerHTML});
						}
					}
				}
			}
		})(i);
	}

	// 删除添加的网址
	for(var i=0;i<dragIs.length;i++){
		dragIs[i].index = i;
		dragIs[i].onclick=function(){
			for(var j=0;j<sitesImgs.length;j++){
				if(sitesImgs[j].src == dragImgs[this.index].src){
					sitesIs[j].className = '';
				}
				this.parentNode.parentNode.className = '';
				this.parentNode.parentNode.parentNode.className = '';
				localStorage.addURL=JSON.stringify({dragCon:$('drag').innerHTML, sitesCon:$('sites').innerHTML});
			}
		}
	}




	// 阻止冒泡
	function stopBubble(evt){
		var event = evt || window.event;
		if(event && event.stopPropagation){
			event.stopPropagation();
		}else{
			event.cancelBubble = true;
		}
	}
	var sitesThis = null;

	// 布局转化---》浮动转定位
	var arr = [];
	for(var i = 0;i<dragLis.length;i++){
		arr[i] = {left:dragLis[i].offsetLeft,top:dragLis[i].offsetTop};
		dragLis[i].style.left = dragLis[i].offsetLeft+'px';
		dragLis[i].style.top = dragLis[i].offsetTop+'px';
	}
	for(var i = 0;i<dragLis.length;i++){
		dragLis[i].style.position='absolute';
		dragLis[i].style.margin=0;
	}
	// 拖拽函数
	function dragLismove(obj){
		obj.onmousedown=function(evt){
			var event = evt||window.event;
			var djl = event.pageX - obj.offsetLeft;
			var djt = event.pageY - obj.offsetTop;
			var div1 = document.createElement('h3');
			div1.id = 'max';
			var downdate = new Date().getTime();
			var bc;
			document.onmousemove=function(evt){
				
				var event=evt||window.event;
				var objLeft = event.pageX - djl;
				var objTop = event.pageY - djt;
				var bodyWidth = document.body.clientWidth;
				var bodyHeight = document.body.clientHeight;
				
				if(objLeft <= 0){
					objLeft = 0;
				}else if(objLeft >= bodyWidth - obj.offsetWidth){
					objLeft = bodyWidth - obj.offsetWidth
				}
				if(objTop <= 0){
					objTop = 0;
				}else if(objTop >= bodyHeight - obj.offsetHeight){
					objTop = bodyHeight - obj.offsetHeight
				}
				obj.style.left = objLeft+'px';
				obj.style.top = objTop+'px';
				var dt2 = new Date().getTime();
				if(dt2 - downdate > 50){
					obj.appendChild(div1);
					bc = true;
				}else{
					bc = false;
				}
			}
			document.onmouseup=function(){
				
				document.onmousemove=null;
				document.onmouseup=null;
				var oNear = mincm(obj);
				if(oNear){
					// 交换位置
					obj.removeChild(div1);
					obj.style.left = arr[oNear.index].left+'px';
					obj.style.top = arr[oNear.index].top+'px';
					oNear.style.left = arr[obj.index].left+'px';
					oNear.style.top = arr[obj.index].top+'px';
					// 换索引
					var temp;
					temp = obj.index;
					obj.index = oNear.index;
					oNear.index = temp;
				}else{
					// 添加成功再删除-----否则会报错
					if(bc){
						obj.removeChild(div1);
					}
					obj.style.left = arr[obj.index].left+'px';
					obj.style.top = arr[obj.index].top+'px';
					stopBubble(evt);
				}
				obj.releaseCapture && obj.releaseCapture();
				localStorage.addURL=JSON.stringify({dragCon:$('drag').innerHTML, sitesCon:$('sites').innerHTML});
			}
			obj.setCapture && obj.setCapture();
			return false;
		}
	}
	for(var i = 0;i<dragLis.length;i++){
		dragLismove(dragLis[i]);
		dragLis[i].index = i;
	}
	function mincm(obj){
		var iMin = 9999999999999999;
		var iMinIndex = -1;
		for(var i = 0;i<dragLis.length;i++){
			if(obj == dragLis[i]){
				continue;
			}
			if(collTest(obj,dragLis[i])){
				var dis = getDis(obj,dragLis[i])
				if(dis < iMin){
					iMin = dis;
					iMinIndex = i;
				}
			}
		}
		if(iMinIndex == -1){
			return null;
		}else{
			return dragLis[iMinIndex];
		}
	}
	function getDis(obj1,obj2){  //得到两个物体之间最短的距离
		var a=obj1.offsetLeft-obj2.offsetLeft;
		var b=obj1.offsetTop-obj2.offsetTop;
		return Math.sqrt(a*a+b*b);
	}
	function collTest(obj1,obj2){
		var l1 = obj1.offsetLeft;
		var t1 = obj1.offsetTop;
		var r1 = obj1.offsetLeft + obj1.offsetWidth;
		var b1 = obj1.offsetTop + obj1.offsetHeight;

		var l2 = obj2.offsetLeft;
		var t2 = obj2.offsetTop;
		var r2 = obj2.offsetLeft + obj2.offsetWidth;
		var b2 = obj2.offsetTop + obj2.offsetHeight;

		if(r1<l2 || l1>r2 || t1>b2 || b1<t2){// 判断---碰不到的情况返回false
			return false;
		}else{
			return true;
		}
	}






	// 背景切换
	//	获取
	var body = document.getElementsByTagName('body')[0];
	var bglis = $('allbgimg').getElementsByTagName('li');
	var bgpitch = $('allbgimg').getElementsByTagName('i');
	var bg = $('allbgimg').getElementsByTagName('img');
	var bgleft = $('allbgimg').getElementsByClassName('left')[0];
	var bgright = $('allbgimg').getElementsByClassName('right')[0];
	var num = 0;// 存放移动距离
	for(var i = 0;i<bglis.length;i++){
		bglis[i].index = i;
		// 背景切换事件
		bglis[i].onclick = function(){
			body.style.backgroundImage = 'url('+bg[this.index].src+')';
			for(var j = 0;j<bglis.length;j++){
				bgpitch[j].className = '';
			}
			bgpitch[this.index].className = 'show';
		}
	}
	$('inter').style.left = num+'px';
	// 屏幕左边按钮
	bgleft.onclick = function(){
		num+=190;
		if(num<=-600){
			num = -600;
		}else if(num>=0){
			num = 0;
		}
		$('inter').style.left = num+'px';
	}
	// 屏幕右边按钮
	bgright.onclick = function(){
		num-=190;
		if(num<=-600){
			num = -600;
		}else if(num>=0){
			num = 0;
		}
		$('inter').style.left = num+'px';
	}
	// 弹出切换背景
	$('changebg').onclick = function(){
		$('bg_img').style.bottom = '0px';
	}
	// 隐藏切换背景
	$('bgclose').onclick = function(){
		$('bg_img').style.bottom = '-200px';
	}
}